<template>
    <v-app class="box">
        <v-carousel :continuous="false" :cycle="false" :show-arrows="false" hide-delimiters height="100vh"
            class="picBox">
            <v-carousel-item v-for="(item, index) in items" :key="index">
                <v-sheet height="100%" tile class="carousel-sheet">
                    <v-row class="fill-height" align="center" justify="center">
                        <img class="pics" :src="item.img" alt="">
                    </v-row>
                </v-sheet>
            </v-carousel-item>
            <v-carousel-item>
                <v-sheet height="100%" tile class="carousel-sheet">
                    <v-row class="fill-height startBox" align="center" justify="space-between">
                        <img class="pics" src='/public/3.jpg' alt="">
                        <v-btn color="primary" @click="startApp" class="start">开始体验</v-btn>
                    </v-row>
                </v-sheet>
            </v-carousel-item>
        </v-carousel>
    </v-app>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const items = ref([
    { img:'../public/1.jpg' },
    { img:'../public/2.jpg'},
]);

const router = useRouter();

const startApp = () => {
    // 跳转到应用的主页面
    router.push('/');
};
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
.box{
    height: 100vh;
}
.carousel-sheet {
    background-color: #f5f5f5;
    color: #333;
    text-align: center;
}

.pics {
    width: 375px;
    display: block;
    margin: 0 auto;
    height: 667px;
}
.startBox{
    position: relative;
}
.start {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: red;
}
</style>
